<include file="Public:header"/>
<link rel="stylesheet" href="__WEBPUBLIC__/Uploadify/uploadify.css" type="text/css" />
<!--主页面-->
<div id="main-content" class="content">
    <ul class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active"><a href="">商家管理</a></li>
        <li class="active">编辑商家</li>
    </ul>

    <div class="page-header clearfix">
        <h3>编辑商家</h3>
        <ul class="nav nav-tabs">
            <li  class="">
                <a href="{:U('Shop/shopList')}">商家列表</a>
            </li>
            <li  class="">
                <a href="{:U('Shop/addShop')}">添加商家</a>
            </li>
        </ul>
    </div>

    <div id="tabs-content" class="content-box-content">
        <div class="ul">
            <form action="{:U('Shop/editShop')}" method="post" class="form-horizontal form" enctype="multipart/form-data" onsubmit="putData()">
                <input type="hidden" name="shop_id" value="{$res['shop_id']}">
                <div class="form-group">
                    <label for="prefix_name" class="col-sm-3 control-label"><em class="prompt-red">*</em>域名参数：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="prefix_name" name="prefix_name" value="{$res['prefix_name']}" required/>
                        <span style="color: red;">（商家小程序的唯一标识）</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-3 control-label"><em class="prompt-red">*</em>商家名称：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="name" name="name" value="{$res['name']}" required/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="account" class="col-sm-3 control-label"><em class="prompt-red">*</em>商家登录账号：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="account" name="account" value="{$res['account']}" required/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label"><em class="prompt-red">*</em>所在地：</label>
                    <div class="col-sm-9">
                        <select onchange="getCity(this.value)"  style="width: 120px;height:34px;font-size: 14px;padding:6px 12px;border-radius:4px;border:1px solid #ccc" name="province">
                            <option value="">省份</option>
                            <volist name="pro" id="pr">
                                <option <if condition="$res['province'] eq $pr['area_id']">selected</if> value="{$pr['area_id']}">{$pr['area_name']}</option>
                            </volist>
                        </select>
                        <select id="city" onchange="getArea(this.value)" style="width: 120px;height:34px;font-size: 14px;padding:6px 12px;border-radius:4px;border:1px solid #ccc" name="city">
                            <option value="">市/县</option>
                            <volist name="city" id="ci">
                                <option <if condition="$res['city'] eq $ci['area_id']">selected</if> value="{$ci['area_id']}">{$ci['area_name']}</option>
                            </volist>
                        </select>
                        <select id="area" style="width: 120px;height:34px;font-size: 14px;padding:6px 12px;border-radius:4px;border:1px solid #ccc" name="area">
                            <option value="">镇/区</option>
                            <volist name="area" id="ar">
                                <option <if condition="$res['area'] eq $ar['area_id']">selected</if> value="{$ar['area_id']}">{$ar['area_name']}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="form-group skill">
                    <label for="address" class="col-sm-3 control-label"><em class="prompt-red">*</em>详细地址：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="address" name="address" value="{$res['address']}" required/>
                    </div>
                </div>

                <div class="form-group skill">
                    <label for="tel" class="col-sm-3 control-label"><em class="prompt-red">*</em>商家的电话：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="tel" name="tel" value="{$res['tel']}" required/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="image_text" class="col-sm-3 control-label"><em class="prompt-red"></em>图文模块名称：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="image_text" name="image_text" value="{$res['image_text']}"/>
                        <span style="color:red;">（小程序首页显示的图文标题）</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"><em class="prompt-red">*</em>商家封面图片：</label>
                    <div id="imgPreview">
                        <if condition="!empty($res['head_pic'])">
                        <div class='parents' style="float: left">
                            <div class='one_del'>[-]</div>
                            <input type='hidden' value="{$res['head_pic']}" name='head_pic'/>
                        <img src="/{$res['head_pic']}" alt="" style="width: 150px;height: auto">
                        </div>
                        </if>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-9">
                        <input type="file" name="head_pic_upload"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"><em class="prompt-red">*</em>商家的多图展示：</label>
                    <div id="imgPreviewMore">
                        <if condition="!empty($res['list_img'])">
                            <volist name="res['list_img']" id="vo">
                                <div class='parents' style="float: left">
                                    <div class='one_more_del'>[-]</div>
                                    <input type='hidden' value="{$vo}" name='pic[]'/>
                                    <img src="/{$vo}" alt="" style="width: 150px;height: auto">
                                </div>
                            </volist>
                        </if>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"></label>
                    <div class="col-sm-9">
                        <input type="file" name="pic_upload" multiple/>
                        <span style="color: red">框选上传多张图片</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content" class="col-sm-3 control-label">商家介绍：</label>
                    <div class="col-sm-9">
                        <textarea class="form-control" id="content" style="width:auto;height:300px;visibility:hidden;" >{$res['content']}</textarea>
                        <textarea name="content" style="display:none;"></textarea>
                        <div class="newhtml" style="display:none;"></div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="button" class="btn btn-default btn-primary make_sure">确认编辑</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<include file="Public:footer"/>
<!--商家的头像和商家的展示图的上传-->
<script>

    $(".make_sure").click(function () {
        var name = $('input[name="name"]').val();
        var account = $('input[name="account"]').val();
        var address = $('input[name="address"]').val();
        var tel = $('input[name="tel"]').val();
        if(!account){
            alert("商家手机号不能为空!");return false;
        }else if(!/^1\d{10}$/.test(account)) {
            alert("手机号格式错误!");return false;
        }
        if(!name){
            alert("商家名称不能为空!");return false;
        }

        if(!address){
            alert("商家地址不能为空!");return false;
        }
        if(!tel){
            alert("商家联系方式不能为空!");return false;
        }
        $(".form").submit();
    })

    /**判断手机号是否被注册*/
    $("#account").blur(function () {
        var account = $("#account").val();
        var shop_id = "{$res['shop_id']}";
        var url = "{:U('Shop/isRegister')}";
        $.post(url,{account:account,shop_id:shop_id},function (data) {
            if(data == 1){
                alert("手机号已经被注册了！");
            }
        });
    })

    function ajax(){
        var filesize = this.files[0].size;
        if (filesize > 10000*1024) {
            alert("请上传大小在500k以下的图片");
            return false;
        }
        var files = this.files;
        var i = '';
        $("#imgPreview").html(" ");
        for(i=0;files.length;i++){
            var picname = files[i].name;
            var reader = new FileReader();
            reader.onload = function(e){
                var src = e.target.result;
                $.ajax({
                    type:"post",
                    url:"{:U('Shop/uploadPic')}",
                    data: {"pic":src,"pic_name":picname},
                    dataType : "json",
                    success : function(data){
                        var data = JSON.parse(data);
                        if(data['flag'] == "success"){
                            $("#imgPreview").append("" +
                                    "<div class='parents'>" +
                                        "<div class='one_del'>[-]</div>" +
                                            "<input type='hidden' value='"+data['data']['path']+"' name='head_pic'/>"+
                                        "<div>" +
                                            "<img src='"+'/'+data['data']['path']+"' style='width: 150px;'>" +
                                        "</div>" +
                                    "</div>");
                            bindClick();
                        }
                    }
                });
            }
            reader.readAsDataURL(files[i]);
        }
    }
    $("input[name='head_pic_upload']").on('change',ajax);
    function bindClick() {
        $(".one_del").click(function () {
            var url = "{:U('Shop/delPhoto')}";
            var file_path = $(this).next().val();
            var shop_id = "{$res['shop_id']}";
            $.post(url,{file_path:file_path,shop_id:shop_id,type:1},function(data){
                if(data == 1){
                    $(this).parent().remove();
                }else{
                    alert("删除失败！请重新尝试！");
                }
            }.bind(this))
        });
    }
    bindClick();



    function ajax1(){
        var filesize = this.files[0].size;
        if (filesize > 10000*1024) {
            alert("请上传大小在500k以下的图片");
            return false;
        }
        var files = this.files;
        var i = '';
        for(i=0;files.length;i++){
            var picname = files[i].name;
            var reader = new FileReader();
            reader.onload = function(e){
                var src = e.target.result;
                $.ajax({
                    type:"post",
                    url:"{:U('Shop/uploadPic')}",
                    data: {"pic":src,"pic_name":picname},
                    dataType : "json",
                    success : function(data){
                        var data = JSON.parse(data);
                        if(data['flag'] == "success"){
                            $("#imgPreviewMore").append("<div class='parents' style='float: left'><div class='one_more_del'>[-]</div>" +
                                    "<input type='hidden' value='"+data['data']['path']+"' name='pic[]'/>"+
                                    "<div><img src='"+'/'+data['data']['path']+"' style='width: 150px;'></div></div>");
                        }
                        bindClickMore();
                    }
                });
            }
            reader.readAsDataURL(files[i]);
        }
    }
    $("input[name='pic_upload']").on('change',ajax1);

    function bindClickMore() {
        $(".one_more_del").off("click");
        $(".one_more_del").click(function () {
            var url = "{:U('Shop/delPhoto')}";
            var file_path = $(this).next().val();
            var shop_id = "{$res['shop_id']}";
            $.post(url,{file_path:file_path,shop_id:shop_id,type:2},function(data){
                if(data == 1){
                    $(this).parent().remove();
                }else{
                    alert("删除失败！请重新尝试！");
                }
            }.bind(this))
        });
    }
    bindClickMore();

    function bindClickMoreZz() {
        $(".one_more_del_zz").off("click");
        $(".one_more_del_zz").click(function () {
            var url = "{:U('Shop/delPhoto')}";
            var file_path = $(this).next().val();
            var shop_id = "{$res['shop_id']}";
            $.post(url,{file_path:file_path,shop_id:shop_id,type:3},function(data){
                if(data == 1){
                    $(this).parent().remove();
                }else{
                    alert("删除失败！请重新尝试！");
                }
            }.bind(this))
        });
    }
    bindClickMoreZz();
</script>

<!--地区的三级联动-->
<script type="text/javascript">
    function getCity(val){
        $("#city").empty();
        $("#area").empty();
        var area = "<option value=''>镇/区</option>";
        $("#area").append(area);
        var option = "<option value=''>市/县</option>";
        $.ajax({
            url:"{: U('Shop/ajaxCity')}",
            data:{parent_id:val},
            dataType:"json",
            type:"get",
            success:function(data){
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].area_id+"'>"+data[i].area_name+"</option>"
                }
                $("#city").append(option);
            }
        });
    }
    function getArea(val){
        $("#area").empty();
        var option = "<option value=''>镇/区</option>";
        $.ajax({
            url:"{: U('Shop/ajaxArea')}",
            data:{parent_id:val},
            dataType:"json",
            type:"get",
            success:function(data){
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].area_id+"'>"+data[i].area_name+"</option>"
                }
                $("#area").append(option);
            }
        });
    }

    function putData() {
        var html = $("#content").val();
        $('.newhtml').html(html);
        var newhtml = $('.newhtml')
        newhtml.find("img").css("maxWidth","100%");
        $("textarea[name='content']").val(newhtml.html());
    }
</script>
<!--富文本-->
<script  src="__WEBPUBLIC__/Common/kindeditor/kindeditor-min.js"></script>
<script  src="__WEBPUBLIC__/Common/kindeditor/lang/zh_CN.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#content', {
            resizeType : 1,
            uploadJson : '__WEBPUBLIC__/Common/kindeditor/php/upload_json.php',
            fileManagerJson :
                    '__WEBPUBLIC__/Common/kindeditor/php/file_manager_json.php',
            allowPreviewEmoticons : false,
            items:[
                'source', '|', 'undo', 'redo', '|', 'cut', 'copy','|', 'justifyleft',
                'justifycenter', 'justifyright',
                'justifyfull', 'clearhtml', 'selectall', '|', 'formatblock',
                'fontname', 'fontsize', '|', 'forecolor',
                'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough','image','multiimage'
            ],
            afterBlur:function(){this.sync();}
        });
    });
</script>